<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let charts = echarts.init(document.getElementById('box'));
  var data = [{
    "name": "一月",
    "value": 80
  }, {
    "name": "二月",
    "value": 87.8
  }, {
    "name": "三月",
    "value": 71
  }, {
    "name": "四月",
    "value": 80
  }, {
    "name": "五月",
    "value": 66
  }, {
    "name": "六月",
    "value": 80
  }, {
    "name": "七月",
    "value": 80
  }];
  var xData = [],
    yData = [];
  var min = 50;
  data.map(function (a, b) {
    xData.push(a.name);
    if (a.value === 0) {
      yData.push(a.value + min);
    } else {
      yData.push(a.value);
    }
  });
  option = {
    backgroundColor: "#111c4e",
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          opacity: 0
        }
      },
      formatter: function (prams) {
        // console.log(prams)
        if (prams[0].data === min) {
          return "合格率：0%"
        } else {
          return "合格率：" + prams[0].data + "%"
        }
      }
    },
    legend: {
      data: ['直接访问', '背景'],
      show: false
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '5%',
      top: '7%',
      height: '85%',
      containLabel: true,
      z: 22
    },
    xAxis: [{
      type: 'category',
      gridIndex: 0,
      data: xData,
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: '#0c3b71'
        }
      },
      axisLabel: {
        show: true,
        color: 'rgb(170,170,170)',
        fontSize: 16
      }
    }],
    yAxis: [{
      type: 'value',
      gridIndex: 0,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      min: min,
      max: 100,
      axisLine: {
        lineStyle: {
          color: '#0c3b71'
        }
      },
      axisLabel: {
        color: 'rgb(170,170,170)',
        formatter: '{value} %'
      }
    }],
    series: [{
        name: '合格率',
        type: 'bar',
        barWidth: '30%',
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: {
              colorStops: [{
                offset: 0,
                color: 'rgba(61,126,235,1)'
              }, {
                offset: 1,
                color: 'rgba(61,126,235,0)'
              }],

            },
          }
        },
        data: yData,
        zlevel: 15

      },
      {
        name: '背景',
        type: 'bar',
        barWidth: '50%',
        barGap: '-135%',
        data: [100, 100, 100, 100, 100, 100, 100],
        itemStyle: {
          normal: {
            color: 'rgba(255,255,255,0.1)'
          }
        },
        zlevel: 9
      },

    ]
  };


  charts.setOption(option);
</script>